import React, { Component } from 'react'
import { NavBar, Icon,TabBar } from "antd-mobile";
import { Tabs } from "antd-mobile";
// import { Toast } from "antd-mobile";
import "./GoodList.scss"
import axios from "../../utils/myaxios"
 class GoodList extends Component {
 constructor(props){
  super(props);
  this.state = {
    searchVal: "",
    hotList: [],
    productList: [],
    tabs: [{ title: "热卖榜" }, { title: "畅销榜" }, { title: "新书榜" }, { title: "童书畅销榜" }, { title: "热搜榜" }, { title: "好评榜" }, { title: "飙升榜" }],
    goods: [],
    selectedTab: "redTab",
    hidden: false,
    fullScreen: false,
    isSelect: false,
    backTop: false, //返回顶部栏默认隐藏
    goods_info:[]
  };
 
 }
 tabbarBlockClick = () => {
  this.setState({
    isSelect: !this.state.isSelect,
  });
};

  componentDidMount() {
    document.title = '当当触屏版'
    axios
      .get(
        "/search_ajax.php?have_ad=1&act=get_product_flow_search&result_set_all_count=0&has_used_recommend=0&keyword=" +
        encodeURI(this.props.match.params.goods_name)
      )
      .then((res) => {
        let arr = []
        if (!res.hotKeywords) {
          arr = res.hotKeywords.slice(0, 6);
        }
        this.setState({
          searchVal: res.keywordStr,
          hotList: arr,
          productList: res.products,
        });
        console.log(res);
      });
  }
  handleItemClick = (goods_info) => {
    this.props.history.push({pathname:"/goodDetail/",state:{goods_info:goods_info}})
  }
  
  render() {
    return (
      <div className="good-list">
        <div className="good-list-nav">
          <NavBar
            className="list-navbar"
            mode="light"
            icon={<Icon type="left" />}
            onLeftClick={() => window.history.go(-1)}
            rightContent={[
              <i
                className={
                  this.state.isSelect === false
                    ? "iconfont icon-19"
                    : "iconfont icon-cha"
                }
                onClick={this.tabbarBlockClick}
                key={123}
              ></i>,
            ]}
          >商品列表
          </NavBar>
          {/* style={{display: this.state.display}} */}
          {/* 商品列表tabbar开始 */}
          <div
          className={
            this.state.isSelect === false
              ? "dd-cart-tabbar"
              : "active dd-cart-tabbar"
          }
        >
          <TabBar
            // 未选中的字体颜色
            unselectedTintColor="#949494"
            // tintColor
            tintColor="#ff2d4a"
            // tabbar 背景色
            barTintColor="#eeeeee"
            hidden={this.state.hidden}
            tabBarPosition="top"
          >
            <TabBar.Item
              title="首页"
              key="index"
              // 默认展示图片
              icon={<i className="iconfont icon-main"></i>}
              // 选中后的展示图片
              selectedIcon={
                <i
                  className="iconfont icon-main"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/"}
              onPress={() => {
                this.props.history.push("/");
              }}
            >
              {this.props.location.pathname === "/" && this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="分类"
              key="category"
              icon={<i className="iconfont icon-fenleichazhao"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-fenleichazhao"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/category"}
              onPress={() => {
                this.props.history.push("/category");
              }}
            >
              {this.props.location.pathname === "/category" &&
                this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="值得买"
              key="worthBuy"
              icon={<i className="iconfont icon-gouwudai"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-gouwudai"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/worthBuy"}
              onPress={() => {
                this.props.history.push("/worthBuy");
              }}
            >
              {this.props.location.pathname === "/worthBuy" &&
                this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="购物车"
              key="cart"
              icon={<i className="iconfont icon-gouwuche1"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-gouwuche1"
                  style={{ color: "#ff2d4a", fontSize: "20px" }}
                ></i>
              }
              selected={this.props.location.pathname === "/cart"}
              onPress={() => {
                this.props.history.push("/cart");
              }}
            >
              {this.props.location.pathname === "/cart" && this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="我的"
              key="my"
              icon={<i className="iconfont icon-wode"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-wode"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/my"}
              onPress={() => {
                this.props.history.push("/my");
              }}
            >
              {this.props.location.pathname === "/my" && this.props.children}
            </TabBar.Item>
          </TabBar>
          {/* <Tabbar className="cart-tabbar-content"></Tabbar> */}
        </div>
          
        </div>
        {/* tab切换 */}
        <div className="list-tab">
          <Tabs
            className="list-tabs"
            tabs={this.state.tabs}
            initialPage={0}
            onChange={(tab, index) => {
              console.log("onChange", index, tab);
            }}
            onTabClick={(tab, index) => {
              console.log("onTabClick", index, tab);
            }}
            tabBarUnderlineStyle={{ borderColor: "red" }}
            tabBarTextStyle={{ fontWeight: "200", color: "black" }}
          >
            <div className="list">
              <div className="sc-main">
                {this.state.productList &&
                  this.state.productList.map((v) => {
                    return (
                      <div className="sc-main-item" key={v.id} onClick={this.handleItemClick.bind(this,v)}>
                        <div className="item-left">
                          
                          <img src={v.image_url} alt="" />
                        </div>
                        <div className="item-right">
                          <div className="item-title">{v.name}</div>
                          <div className="item-name">{v.authorname}</div>
                          <div className="item-biaozhi">
                            {v.product_tags &&
                              v.product_tags.map((vv) => {
                                return <span key={vv.name}>{vv.name}</span>;
                              })}
                          </div>
                          <div className="item-price">
                            <span>￥{v.price}</span>
                            <s>{v.original_price}</s>
                            <em>{v.score}折</em>
                          </div>
                          {v.ebook_dd_price ? (
                            <div className="item-banben">
                              <i className="iconfont icon-dianzishu"></i>
                            电子书版 ￥ {v.ebook_dd_price}
                            </div>
                          ) : (
                              ""
                            )}
                          <div className="item-haopin">
                            100.0好评({v.total_review_count}人)
                        </div>
                        </div>

                      </div>
                    );
                  })}
                      <span id="huidb"  onClick={ (e) => { e.preventDefault(window.scrollTo(0,0)) } }>
                      {/* //javascript:window.scrollTo(0,0) */}
                        回到顶部
                      </span>
              </div>

            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              图书
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              童书
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              童书
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              热搜
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              好评
            </div>
            <div
              style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "center",
                height: "150px",
                backgroundColor: "#fff",
              }}
            >
              飙升
            </div>
          </Tabs>
        </div>
       <div className="listTabBar">
       <TabBar
            // 未选中的字体颜色
            unselectedTintColor="#949494"
            // tintColor
            tintColor="#ff2d4a"
            // tabbar 背景色
            barTintColor="#eeeeee"
            hidden={this.state.hidden}
            tabBarPosition="top"
          >
            <TabBar.Item
              title="首页"
              key="index"
              // 默认展示图片
              icon={<i className="iconfont icon-main"></i>}
              // 选中后的展示图片
              selectedIcon={
                <i
                  className="iconfont icon-main"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/"}
              onPress={() => {
                this.props.history.push("/");
              }}
            >
              {this.props.location.pathname === "/" && this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="分类"
              key="category"
              icon={<i className="iconfont icon-fenleichazhao"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-fenleichazhao"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/category"}
              onPress={() => {
                this.props.history.push("/category");
              }}
            >
              {this.props.location.pathname === "/category" &&
                this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="值得买"
              key="worthBuy"
              icon={<i className="iconfont icon-gouwudai"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-gouwudai"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/worthBuy"}
              onPress={() => {
                this.props.history.push("/worthBuy");
              }}
            >
              {this.props.location.pathname === "/worthBuy" &&
                this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="购物车"
              key="cart"
              icon={<i className="iconfont icon-gouwuche1"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-gouwuche1"
                  style={{ color: "#ff2d4a", fontSize: "20px" }}
                ></i>
              }
              selected={this.props.location.pathname === "/cart"}
              onPress={() => {
                this.props.history.push("/cart");
              }}
            >
              {this.props.location.pathname === "/cart" && this.props.children}
            </TabBar.Item>
            <TabBar.Item
              title="我的"
              key="my"
              icon={<i className="iconfont icon-wode"></i>}
              selectedIcon={
                <i
                  className="iconfont icon-wode"
                  style={{ color: "#ff2d4a" }}
                ></i>
              }
              selected={this.props.location.pathname === "/my"}
              onPress={() => {
                this.props.history.push("/my");
              }}
            >
              {this.props.location.pathname === "/my" && this.props.children}
            </TabBar.Item>
          </TabBar>
       </div>
      </div>
  
    )
  }

}
export default GoodList;